<template>
	<view class="cancel-order" v-if="refundInfo">
		<basic-nav-bar 
			backgroundColor="#fff"
			color="#333333"
			:statusBar="true"
			:border="false" 
			:fixed="true"
			left-icon="arrowleft" 
			title="取消订单" 
			:clickLeftBack="false"
			@clickLeft="goBack" 
		/>
		<view class="cancel-order-content">
			<card title="退款总额">
				<view class="row refund-price">
					退款金额：<basic-price :price="refundInfo.refundableAmount" size="30rpx" color="#F24E5A" />		
				</view>
				<view class="tips">
					Tips：退款金额根据退改规则自动计算				
				</view>
			</card>	
			<card title="商品信息">
				<view class="product-name">
					{{refundInfo.productName}}					
				</view>
				<basic-label-value label="购买数量" color="#666666" size="28rpx">
					<text v-if="refundInfo.subOrders && refundInfo.subOrders.length">
						<text v-for="(item,index) in refundInfo.subOrders" :key="index">
							{{item.skuName}} x {{item.productNum}}
							{{(index+1) === refundInfo.subOrders.length ? `` : `, `}}
						</text>
					</text>
				</basic-label-value>
				<basic-label-value label="实付金额" color="#666666" size="28rpx">
					<basic-price :price="refundInfo.actualAmount" size="26rpx" color="#333333" />
				</basic-label-value>
			</card>	
			<card title="退改政策">				
				<view class="rule" v-for="(item,index) in refundInfo.cancalRules" :key="index">
				 {{item}}
				</view>
			</card>	
			<card title="退款原因">	
				<view class="refund-reason--wrap">
					<view class="refund-reason-label">
						退款原因<text class="require">*</text>
					</view>
					<view class="value--wrap" @click="select">
						<view class="refund-reason-value">
							{{form.reasonLabel}}						
						</view>	
						<basic-icons name="icon-arrow-down" size="36rpx" color="#999" />				
					</view>			
					<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
				</view>
				<view class="refund-desc--wrap">
					<view class="refund-reason-label">
						退款描述					
					</view>
					<u-form ref="reasonForm" :model="form" >
		                <u-form-item :border-bottom="false" prop="remark">
							<u-input 
							    v-model="form.remark" 
								placeholder-style="font-size: 32rpx; color: #BDBDBD;" 
								:custom-style="customStyle" 
								class="refund-reason-value" 
								placeholder="请填写退款原因描述" 
							/>
						</u-form-item>
					</u-form>
				</view>
			</card>	
		</view>	
		<bottomBar>
			<basic-button type="primary" height="100%" width="750rpx" borderRadius="0" size="large" @click="onSubmit()" >确认</basic-button>
		</bottomBar>	
	</view>
</template>
<script>
import { getPreCancelInfo, cancelOrder } from 'api'
import {decodeQueryObject} from 'utils/helper/query'
import store from '@/store'
import sdk from 'sdk'
import card from '../../components/card'
import bottomBar from '@/components/business/bottom-bar'
export default {
	name: 'cancel-order',
	components: {
		card, bottomBar
	},
	data() {
		return {
			options: null,
			refundInfo: null,
			show: false,
			customStyle:{fontSize: '32rpx', color: '#BDBDBD',},
			list: [
				{
					value: '1',
					label: '预订重复'
				},
				{
					value: '2',
					label: '行程有变'
				},
				{
					value: '3',
					label: '不想去了'
				},
				{
					value: '4',
					label: '其他'
				}
			],
			form: {
				reason:null,
				reasonLabel:'请选择退款原因',
				remark:null
			},
			rules:{
				remark: [
					{
						max: 100,
						message: '字数过多，请调整输入',
						trigger: 'blur,change'
					}
				]
			}
		}
	},
	onLoad(query) {
		this.options = decodeQueryObject(query)
		console.log('this.options:', this.options)
		const { orderNo, mToken } = this.options
		if(mToken) store.commit('SAVE_TOKEN', { token: mToken })	
		// this.options.orderNo = '278524481373797'
	},
	onReady() {
		this.$refs.reasonForm && this.$refs.reasonForm.setRules(this.rules);
	},
	mounted(){
		this.getPreInfo()
	},
	methods: {
		getPreInfo() {
			getPreCancelInfo({orderNo: this.options.orderNo}).then(res=>{
				this.refundInfo =  res.result
			})
		},
		goBack() {
			sdk.navigateBack() 
		},
		confirm(e) {
			console.log(e);
			this.form.reasonLabel=e[0].label
			this.form.reason=e[0].value
		},
		select() {
			this.show = !this.show
		},
		onSubmit() {
			// this.$refs.reasonForm.setRules(this.rules);
			if(this.form.reasonLabel=="请选择退款原因"){
				sdk.showModal({
					title: '温馨提示',
					content: '请选择退款原因',
					success: function (res) {
					}
				});
				return
			}

			if(this.form.reason == '4' && !this.form.remark){
				sdk.showModal({
					title: '温馨提示',
					content: '请填写退款原因描述',
					success: function (res) {
					}
				});
				return
			}

			this.$refs.reasonForm.validate(valid => {
				if (valid) {
					console.log('验证通过');					
					const params = {
						...this.form,
						refundAmount: this.refundInfo.refundableAmount,
						orderNo: this.options.orderNo
					}
					cancelOrder(params).then(res => {
						console.log('cancelOrder:::', res)
						if (res && res.code === 0) {
							sdk.showToast({
								icon: 'none',
								title: '订单取消成功',
						        duration: 2000
							})
							setTimeout(()=>{sdk.navigateBack()},2000)							 
						} else {
							sdk.showToast({
								icon: 'none',
								title: '订单取消失败',
						        duration: 2000
							})
						}
					})
				} else {
					console.log('验证失败');
				}
			});
		}
	}
}
</script>
<style lang="less">
.cancel-order{
	min-height: 100vh;
	background: #F2F2F2;
	.row{
		display: flex;
		flex-direction: row;
	}
	.refund-price{
		
	}
	.tips{		
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-top: 20rpx;
	}
	.cancel-order-content{
		margin-top: 30rpx;
		// padding-bottom: @bottom_bar_height;
	}
	.product-name{
		margin-bottom: 20rpx;
        font-size: 30rpx;	
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}
	.rule{		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}
	.refund-reason--wrap{
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #EAEAEA;
		.value--wrap{					
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}
	
	.refund-reason-label{			
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}
	.refund-reason-value{
		font-size: 32rpx;
		color: #BDBDBD;
	}
	.require{
		color: #F24E5A;
		margin-left: 5rpx;
	}

	.btn-content {
		width: 100%;
	}
}
</style>